<!-- 用于快捷演示代码 -->

<style lang="scss">
.vue-code-mirror__h {
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 18px;
}
.vue-code-mirror--no-title {
  .vue-code-mirror__h {
    display: none;
  }
}
.vue-code-mirror__con {
  position: relative;
  //.vue-code-mirror__copy {
  //  position: absolute;
  //  right: 0;
  //  top: 0;
  //  transform: translateY(-100%);
  //  z-index: 100000;
  //}
}
</style>

<template>
  <z-space class="vue-code-mirror" :class="{'vue-code-mirror--no-title': noTitle}" vertical>
    <template v-if="xmlMan.code">
      <zw-layout
          class="vue-code-mirror__tool"
          style="justify-content: space-between;" center="crosAxis" row>
        <h3 class="vue-code-mirror__h vue-code-mirror__tpl">template</h3>
        <button class="vue-code-mirror__copy" type="button" @click="doCopy(xmlMan.code)">复制</button>
      </zw-layout>
      <div class="vue-code-mirror__con">
        <codemirror class="z-code" v-model="xmlMan.code" :options="xmlMan.cmOptions" />
      </div>
    </template>
    <template v-if="codeMan.code">
      <zw-layout
          class="vue-code-mirror__tool"
          style="justify-content: space-between;" center="crosAxis" row>
        <h3 class="vue-code-mirror__h vue-code-mirror__js">js</h3>
        <button class="vue-code-mirror__copy" type="button" @click="doCopy(codeMan.code)">复制</button>
      </zw-layout>
      <div class="vue-code-mirror__con">
        <codemirror class="z-code" v-model="codeMan.code" :options="codeMan.cmOptions" />
      </div>
    </template>
    <template v-if="scssMan.code">
      <zw-layout
          class="vue-code-mirror__tool"
          style="justify-content: space-between;" center="crosAxis" row>
        <h3 class="vue-code-mirror__h vue-code-mirror__tpl">scss</h3>
        <button class="vue-code-mirror__copy" type="button" @click="doCopy(scssMan.code)">复制</button>
      </zw-layout>
      <div class="vue-code-mirror__con">
        <codemirror class="z-code" v-model="scssMan.code" :options="scssMan.cmOptions" />
      </div>
    </template>
  </z-space>
</template>

<script>
import {quickHtmlCode, quickJsCode, quickScssCode} from "../CodeMirror";

export default {
  name: 'VueCodeMirror',
  props: {
    tpl: String,
    js: String,
    scss: String,
    noTitle: Boolean
  },
  setup(props = {}) {
    let xmlMan = quickHtmlCode(props.tpl)
    let codeMan = quickJsCode(props.js)
    let scssMan = quickScssCode(props.scss)
    return {
      xmlMan,
      scssMan,
      codeMan
    }
  },
  methods: {
    doCopy: function (message) {
      this.$copyText(message).then(function (e) {
        ELEMENT.Message.info('Copied')
        console.log(e)
      }, function (e) {
        ELEMENT.Message.error('Can not copy')
        console.log(e)
      })
    }
  }
}
</script>
